{% extends "base.html" %}



{% block css %}
<link rel="stylesheet" href="/static/css/admin.css">

{% endblock %}


{% block center %}


<!--头部导航-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-bottom: 0px;background-color: #FFFFFF;">
      <li><a href="/" style="color: #377CD8;">首页</a></li>
      <li><a href="javascript:;">资产信息</a></li>
      <li class="active">{{ title }}</li>
    </ol>
  </div>
</div>



<!--用户信息-->
<div class="panel panel-default center-top" style="margin-bottom:15px;min-width:1300px;">
  <div class="panel-heading">
      <div class="row" style="padding-top:5px;padding-left:10px;">

          <div class="col-sm-3" style="display:inline-block;margin-bottom:5px;">
              <a href="javascript:;" class="btn btn-sm btn-success" data-toggle="modal" data-target="#netwkModal"> 添加</a>
              <a href="javascript:;" class="btn btn-sm btn-danger" id="delnetwk"> 删除</a>
              <a href="javascript:;" class="btn btn-sm btn-warning" id="syncnetwk">同步</a>
              <a href="javascript:;" class="btn btn-sm btn-primary" id="import-netwk">导入</a>
          </div>

          <div class="col-sm-6" style="display:inline-block">
              <div style="width:200px;display: inline-block;">
                    <select  class="form-control" id="select-idc">
                         <option value="0">机房</option>
                         {% for idc in idc_list %}
                         <option value="{{ idc.idc_id }}">{{ idc.idc_name }}</option>
                         {% endfor %}
                     </select>
                </div>

              <div style="width:200px;display: inline-block;">
                <select  class="form-control" id="select-netwkgroup">
                     <option value="0">主机组</option>
                     {% for group in group_list %}
                     <option value="{{ group.group_id }}">{{ group.group_name }}</option>
                     {% endfor %}
                 </select>
              </div>

              <div style="width:200px;display: inline-block;">
                <select  class="form-control" id="select-device">
                     <option value="设备类型">设备类型</option>
                     <option value="服务器">服务器</option>
                     <option value="防火墙">防火墙</option>
                     <option value="交换机">交换机</option>
                     <option value="路由器">路由器</option>
                 </select>
              </div>
          </div>

          <div class="col-sm-3" style="display:inline-block;">

              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search for..." id="info-search">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" id="sub-search">搜索</button>
                    <button class="btn btn-success" type="button" style="margin-left:5px" id="export-netwk"> 导出 </button>
                  </span>
                </div><!-- /input-group -->

              </div>

      </div>
  </div>

  <div class="panel-body" id="netwk-info">
        <table class="table table-hover table-bordered" style="margin-top:5px;">

          <thead>
            <tr style="background-color: #f5f5f5;">
              <th><input type="checkbox" id="ckb_head" name="check_box" /></th>
              <th>IP</th>
              <th>分组</th>
              <th>描述</th>
              <th>类型</th>
              <th>厂商</th>
              <th>IDC</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="netwk_table">

            {% for netwk in netwk_obj %}
            <tr name="tbody">
              <td><input id="{{ netwk.IP  }}" type="checkbox" name="ckb"/></td>
              <td>{{ netwk.netwk_ip }}</td>
              <td>{{ netwk.group.host_group_name }}</td>
              <td>{{ netwk.netwk_msg }}</td>
              <td>{{ netwk.netwk_type }}</td>
              <td>{{ netwk.supplier.supplier }}</td>
              <td>{{ netwk.idc.idc_name }}</td>
              <td>{{ netwk.status }}</td>
              <td style="padding-left:5px;">


                <a href="javascript:;" name="edit-netwk" netwk_id="{{ netwk.id }}" style="text-decoration:none;" data-toggle="tooltip" data-placement="left" title="修改"><span class="fa fa-pencil" ></span> </a>&nbsp;&nbsp;&nbsp;

                <a href="javascript:;" name="del-netwk"  netwk_id="{{ netwk.id }}" style="text-decoration:none;" data-toggle="tooltip" data-placement="top" title="删除"><span class="fa fa-trash"></span> </a>&nbsp;&nbsp;&nbsp;

                <a href="javascript:;" name="info-netwk" style="text-decoration:none;" data-toggle="tooltip" data-placement="top" title="详情信息"><span class="fa fa-info-circle"></span> </a>&nbsp;&nbsp;&nbsp;


              </td>
            </tr>
          {% endfor %}


          </tbody>


        </table>
        <div class="text-right" style="margin-top:-30px;padding-right:9%">
          <ul class="pagination" id="pagination">
          </ul>
        </div>
  </div>
</div>


{% endblock %}


<!-- Modal -->
{% block modal %}

<!--添加主机模态框-->
<div class="modal fade" id="netwkModal" tabindex="-1" role="dialog" aria-labelledby="netwkModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:100px;width: 750px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="netwkModalLabel">添加设备</h4>
      </div>
      <div class="modal-body">

          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label >IP地址</label>
                    <input  class="form-control"  placeholder="IP地址" id="netwk-ip">
                  </div>

              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>远程端口</label>
                    <input  class="form-control"  placeholder="远程端口" id="netwk-remove-port">
                  </div>
              </div>
          </div>


          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label>管理账号</label>
                    <input  class="form-control"  placeholder="管理账号" id="netwk-user">
                  </div>
              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>账号密码</label>
                    <input  class="form-control" type="password" placeholder="账号密码" id="netwk-passwd">
                  </div>

              </div>
          </div>

          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label>设备类型</label>
                    <select  id="netwk-type" class="form-control">
                        <option value="路由器">路由器</option>
                        <option value="交换机">交换机</option>
                        <option value="防火墙">防火墙</option>
                        <option value="负载均衡">负载均衡</option>
                        <option value="WAF">WAF</option>
                        <option value="IPS">IPS</option>
                     </select>
                  </div>

              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>分组</label>
                    <select  id="netwk-group" class="form-control">
                         {% for info in group_obj %}
                         <option value="{{ info.id }}">{{ info.host_group_name }}</option>
                         {% endfor %}
                         <option value="0">其他</option>

                     </select>
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label>IDC</label>
                    <select  id="netwk-idc" class="form-control">
                         {% for info in idc_obj %}
                         <option value="{{ info.id }}">{{ info.idc_name }}</option>
                         {% endfor %}
                        <option value="0">其他</option>
                     </select>
                  </div>

              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label >厂商</label>
                         <select  id="netwk-supplier" class="form-control">
                             {% for info in supplier_obj %}
                             <option value="{{ info.id }}">{{ info.supplier }}</option>
                             {% endfor %}
                             <option value="0">其他</option>
                         </select>
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                    <label>描述</label>
                    <input  class="form-control" placeholder="描述" id="netwk-msg">
                  </div>
              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>序列号</label>
                    <input  class="form-control" placeholder="序列号" id="netwk-serial-num">
                  </div>

              </div>
          </div>


          <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                    <label>购买日期</label>
                    <input  class="form-control" placeholder="购买日期" id="netwk-purchase-date">
                  </div>
              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>过保日期</label>
                    <input  class="form-control" placeholder="过保日期" id="netwk-overdue-date">
                  </div>
              </div>
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-netwk">提交</button>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="edit-netwkModal" tabindex="-1" role="dialog" aria-labelledby="netwkModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:100px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-netwkModalLabel">修改主机信息</h4>
      </div>
      <div class="modal-body">

          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label >IP地址</label>
                    <input  class="form-control"  placeholder="IP地址" id="edit-netwk-ip">
                  </div>

              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>远程端口</label>
                    <input  class="form-control"  placeholder="远程端口" id="edit-netwk-remove-port">
                  </div>
              </div>
          </div>


          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label>管理账号</label>
                    <input  class="form-control"  placeholder="管理账号" id="edit-netwk-user">
                  </div>
              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>账号密码</label>
                    <input  class="form-control" type="password" placeholder="账号密码" id="edit-netwk-passwd">
                  </div>

              </div>
          </div>

          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label>设备类型</label>
                    <select  id="edit-netwk-type" class="form-control">
                        <option value="路由器">路由器</option>
                        <option value="交换机">交换机</option>
                        <option value="防火墙">防火墙</option>
                        <option value="负载均衡">负载均衡</option>
                        <option value="WAF">WAF</option>
                        <option value="IPS">IPS</option>
                     </select>
                  </div>

              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>分组</label>
                    <select  id="edit-netwk-group" class="form-control">
                         {% for info in group_obj %}
                         <option value="{{ info.id }}">{{ info.host_group_name }}</option>
                         {% endfor %}
                        <option value="0">其他</option>
                     </select>
                  </div>
              </div>
          </div>

          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                    <label>IDC</label>
                    <select  id="edit-netwk-idc" class="form-control">
                         {% for info in idc_obj %}
                         <option value="{{ info.id }}">{{ info.idc_name }}</option>
                         {% endfor %}
                        <option value="0">其他</option>
                     </select>
                  </div>

              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label >厂商</label>
                         <select  id="edit-netwk-supplier" class="form-control">
                             {% for info in supplier_obj %}
                             <option value="{{ info.id }}">{{ info.supplier }}</option>
                             {% endfor %}
                             <option value="0">其他</option>
                         </select>
                  </div>
              </div>
          </div>



          <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                    <label>描述</label>
                    <input  class="form-control" placeholder="描述" id="edit-netwk-msg">
                  </div>
              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>序列号</label>
                    <input  class="form-control" placeholder="序列号" id="edit-netwk-serial-num">
                  </div>

              </div>
          </div>


          <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                    <label>购买日期</label>
                    <input  class="form-control" placeholder="购买日期" id="edit-netwk-purchase-date">
                  </div>
              </div>

              <div class="col-sm-6">
                  <div class="form-group">
                    <label>过保日期</label>
                    <input  class="form-control" placeholder="过保日期" id="edit-netwk-overdue-date">
                  </div>
              </div>
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-netwk">提交</button>
      </div>
    </div>
  </div>
</div>





{% endblock  %}



{% block js %}

<script type="text/javascript" src="/static/js/asset_v2.js"></script>

   <script>
        $("#netwk-purchase-date" ).datepicker();
        $("#netwk-overdue-date" ).datepicker();
        $("#edit-netwk-purchase-date" ).datepicker();
        $("#edit-netwk-overdue-date" ).datepicker();
        $("#netwk-purchase-date").datepicker( "option", "dateFormat","yy-mm-dd");
        $("#netwk-overdue-date").datepicker( "option", "dateFormat","yy-mm-dd");
        $("#edit-netwk-purchase-date").datepicker( "option", "dateFormat","yy-mm-dd");
        $("#edit-netwk-overdue-date").datepicker( "option", "dateFormat","yy-mm-dd");
   </script>

{% endblock %}





